---
title: "<McpUseProvider />"
description: "Utility component to simplify the setup of your widget"
icon: "layers"
---

The `<McpUseProvider />` is a utility component that simplifies the setup of your widget. It automatically includes StrictMode, ThemeProvider, BrowserRouter, optional WidgetControls, and ErrorBoundary, eliminating the need to manually set up these providers.

## Import

```typescript
import { McpUseProvider } from 'mcp-use/react';
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | **required** | The widget content to wrap |
| `debugger` | `boolean` | `false` | Enable debug button in WidgetControls component |
| `viewControls` | `boolean \| "pip" \| "fullscreen"` | `false` | Enable view controls (fullscreen/pip). `true` shows both, `"pip"` shows only pip, `"fullscreen"` shows only fullscreen |
| `autoSize` | `boolean` | `false` | Automatically notify OpenAI about container height changes using ResizeObserver |

## What's Included

The `McpUseProvider` automatically wraps your widget with:

1. **StrictMode** (outermost) - React's development mode checks
2. **ThemeProvider** - Theme management that syncs with ChatGPT
3. **BrowserRouter** - React Router with automatic basename calculation
4. **WidgetControls** (conditional) - Debug and view controls if enabled
5. **ErrorBoundary** (innermost) - Error handling for graceful failures
6. **Auto-sizing container** (conditional) - ResizeObserver wrapper if `autoSize={true}`

## Basic Usage

```tsx
import { McpUseProvider } from 'mcp-use/react';
import { AppsSDKUIProvider } from '@openai/apps-sdk-ui/react';
import { Link } from 'react-router-dom';

function MyWidget() {
  return (
    <McpUseProvider>
      <AppsSDKUIProvider linkComponent={Link}>
        <div>My widget content</div>
      </AppsSDKUIProvider>
    </McpUseProvider>
  );
}
```

## With Debug Controls

Enable the debug button to inspect widget state, props, and test tool calls:

```tsx
<McpUseProvider debugger>
  <AppsSDKUIProvider linkComponent={Link}>
    <MyWidget />
  </AppsSDKUIProvider>
</McpUseProvider>
```

## With View Controls

Enable fullscreen and picture-in-picture controls:

```tsx
<McpUseProvider viewControls>
  <AppsSDKUIProvider linkComponent={Link}>
    <MyWidget />
  </AppsSDKUIProvider>
</McpUseProvider>
```

## With Auto-sizing

Enable automatic height notifications for dynamic content:

```tsx
<McpUseProvider autoSize>
  <AppsSDKUIProvider linkComponent={Link}>
    <MyWidget />
  </AppsSDKUIProvider>
</McpUseProvider>
```

## Complete Example

```tsx
import { McpUseProvider } from 'mcp-use/react';
import { AppsSDKUIProvider } from '@openai/apps-sdk-ui/react';
import { Link } from 'react-router-dom';
import { useWidget } from 'mcp-use/react';

function ProductWidget() {
  const { props } = useWidget<{ productName: string }>();
  
  return (
    <div>
      <h1>{props.productName}</h1>
      {/* Widget content */}
    </div>
  );
}

export default function App() {
  return (
    <McpUseProvider debugger viewControls autoSize>
      <AppsSDKUIProvider linkComponent={Link}>
        <ProductWidget />
      </AppsSDKUIProvider>
    </McpUseProvider>
  );
}
```

## Related Components

- [`WidgetControls`](./widgetcontrols) - Debug and view controls
- [`ThemeProvider`](./themeprovider) - Theme management
- [`ErrorBoundary`](./errorboundary) - Error handling
- [`useWidget`](./usewidget) - Widget hook for accessing props and actions

